<template>
  <div class="are_building_info">
    <el-row class="all_main">
      <div class="grid-content bg-purple">
        <div class="header_title">
          <span>中间件状态</span>
        </div>

        <div class="middleware_list">
          <el-row :gutter="20">
            <el-col
              :span="6"
              v-for="(item,index) in middlewareListArr"
              :key="index"
              class="textbox"
            >
              <div class="building_list">
                <el-card class="box-card">
                  <div class="textitemname" style="height:30px">
                    <div>
                      编号:
                      <span>{{item.code}}</span>
                    </div>
                  </div>
                  <div class="textitemname" style="height:30px">
                    <div>
                      IP地址:
                      <span>{{item.ip}}</span>
                    </div>
                  </div>
                  <div class="textitemname" style="height:30px">
                    <div>
                      登录时间:
                      <span>{{item.loginTime}}</span>
                    </div>
                  </div>
                  <div class="textitemname" style="height:30px">
                    <div>
                      中间件版本:
                      <span>{{item.version}}</span>
                    </div>
                  </div>
                  <div class="textitemname" style="height:30px">
                    <div>
                      MAC地址:
                      <span>{{item.mac}}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeschoolid: "",
      administrator: "",
      middlewareListArr: []
    };
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid;
    this.administrator = sessionStorage.getItem("administrator");
  },
  mounted() {
    this.getMiddlewareList();
  },
  methods: {
    getMiddlewareList() {
      this.$http({
        url: this.$http.adornUrl("/client-unit"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: "0"
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.middlewareListArr = data.messageContent;
          console.log(this.middlewareListArr);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.are_building_info {
  height: 100%;
  .all_main {
    height: 100%;
    .bg-purple {
      height: 100%;
      width: 100%;
      // overflow-x: scroll;
      white-space: nowrap;
      padding: 0 10px;
      .header_title {
        padding: 20px 0;
        font-weight: bolder;
        text-align: left;
        border-bottom: 1px solid #e5e9f2;
        color: #4e4f50;
      }
      .middleware_list {
        margin-top: 10px;
        padding: 0px 10px;
        .textbox {
          margin-top: 10px;
          .building_list {
            .box-card {
              padding: 0 5px;
              .clearfix:before,
              .clearfix:after {
                display: table;
                content: "";
              }
              .clearfix:after {
                clear: both;
              }
              .textitem {
                font-weight: bolder;
                color: #909399;
                padding: 5px 5px;
                .title {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  word-break: keep-all;
                }
                .bulding_css {
                  margin-left: 32px;
                  margin-top: 0px;
                  margin-bottom: 0px;
                  text-indent: -32px;
                }
              }
              .textitemname {
                font-weight: bolder;
                color: #4e4f50;
                padding: 5px 5px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
              }
              .textitemfoort {
                height: 100%;
                border-top: 1px solid #e5e9f2;
                .bulding_caozuo {
                  padding: 2px 0px;
                  height: 30px;
                  .bulding_font_size,
                  .bulding_font_size1 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #e5e9f2;
                    .el-button--medium {
                      font-size: 18px;
                      padding: 5px 20px;
                    }
                  }
                  .bulding_font_size1 {
                    border-right: 0px solid #e5e9f2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>